<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/custom/css/dataTransfer.css">
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body>
<div class="dataListBoxContainer clearfix">
    <div class="row">
        <div class="sourceTotal col-xs-6">
            <h6>可选</h6>
            <div class="sourceFieldStartBox col-xs-6 ">
                <div class="selectHead">源字段</div>
                <div class="tableBox">
                    <table>
                        <tr><td>大河</td></tr>
                        <tr><td>天上的星星</td></tr>
                        <tr><td>我是一个</td></tr>
                        <tr><td>123456</td></tr>
                    </table>
                </div>
            </div>
            <div class="targetFieldStartBox col-xs-6 ">
                <div class="selectHead">目标字段</div>
                <div class="tableBox">
                    <table>
                        <tr><td>放羊的星星</td></tr>
                        <tr><td>参北星星斗啊</td></tr>
                        <tr><td>小小的石头</td></tr>
                        <tr><td>1256</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="dataMoveBtn col-xs-1">
            <button class="autoToMatching btn default" >自动匹配</button>
            <button class="dataToRight btn default"><i class=" glyphicon glyphicon-chevron-right "></i></button>
            <button class="dataToLeft btn default"><i class=" glyphicon glyphicon-chevron-left "></i></button>
        </div>
        <div class="dataSelectedBox col-xs-5">
            <h6>已选</h6>
            <table class="tableHead"><tr><td>源字段</td><td>目标字段</td></tr></table>
            <div class="tableBigBox">
                <table class="dataSelectedTable">
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    var tableDataChange = {                         //控制表格穿梭的对象
        allTrClick : function(select,addClass){     //点击表格里tr的事件
            $(select).on('click','tr',function(){
                if($(this).hasClass(addClass)){
                    $(this).removeClass(addClass)   //本身有就去掉类名
                }else {
                    select == '.dataSelectedBox'? $(this).addClass('trSelectedClick'): $(this).addClass(addClass).siblings().removeClass(addClass); //左边类名去重,右边可以有多个

                }
            });
        },
        allDataToBtn : function(){                  //点击按钮的事件
            $('.dataMoveBtn').on('click','button',function(){
                if($(this).hasClass('dataToRight')){             //点击向右的按钮
                    var sourceData = $('.trSourceClick').children().text();
                    var targetData = $('.trTargetClick').children().text();
                    if (sourceData && targetData){              //source和target必须都选中
                        $('.dataSelectedTable tbody').append('<tr><td>'+sourceData+'</td><td>'+targetData+'</td></tr>');
                        $('.trSourceClick').remove();          //已选的表格append,可选的表格remove
                        $('.trTargetClick').remove();
                    }
                }
                else if($(this).hasClass('dataToLeft')){        //点击向左的按钮
                    var trSelectedClick =  $('.trSelectedClick');
                    $.each(trSelectedClick,function(i,v){

                        var sourceDataF = $(this).children().eq(0).text();
                        var targetDataF = $(this).children().eq(1).text();       //分别得到source和target对应的数据
                        trSelectedClick.remove();                                  //已选的表格remove,可选的表格append
                        $('.sourceFieldStartBox tbody').append('<tr><td>'+sourceDataF+ '</td></tr>');
                        $('.targetFieldStartBox tbody').append('<tr><td>'+targetDataF+ '</td></tr>')
                    })
                }

                else if ($(this).hasClass('autoToMatching')){         //点击自动匹配按钮
                    var similarArr =[],domArr=[],resourceDataArr=[],targetDataArr=[];
                    $.each($('.sourceFieldStartBox td'),function(){
                        var thatTx = $(this).text();                    //resource的数据
                        $.each($('.targetFieldStartBox td'),function(){
                            var  thisTx  = $(this).text();              //target的数据
                            resourceDataArr.push(thatTx);               //resource的数据集合
                            targetDataArr.push(thisTx);                  //target的数据集合
                            var trDom = '<tr><td>'+thatTx+'</td><td>'+thisTx+'</td></tr>';
                            domArr.push(trDom);                         //domArr的数据集合

                            similarArr.push(strSimilarity2Percent(thisTx, thatTx))  //相似度的集合
                        })
                    });

                    $.each(similarArr,function(i,v){
                        console.log(v > 0?v:0);
                        if ( v == Math.max.apply(Math, similarArr) && v != 0 ){

                            var currentIndex = similarArr.indexOf(v);           //当前最大相似度的索引,并且相似度不会为0

                            $('.dataSelectedTable').append(domArr[currentIndex]);   //已选的表格append
                            var sourceTd = resourceDataArr[currentIndex];
                            var targetTd = targetDataArr[currentIndex];             //找到需要remove的source数据和target数据

                            $.each($('.sourceFieldStartBox tr'),function(){     //source表格中删除
                                if ( $(this).find('td').text() == sourceTd){
                                    $(this).remove();
                                    return false
                                }
                            });

                            $.each($('.targetFieldStartBox tr'),function(){     //target表格中删除
                                if ( $(this).find('td').text() == targetTd){
                                    $(this).remove();
                                    return false
                                }
                            });
                            return false
                        }
                    });
                }
            });
        },
        init : function(){
            this.allTrClick('.sourceFieldStartBox','trSourceClick');
            this.allTrClick('.targetFieldStartBox','trTargetClick');
            this.allTrClick('.dataSelectedBox .tableBigBox','trSelectedClick');
            this.allDataToBtn();
        }
    };

    (function(){
        tableDataChange.init();
    })();



    //两个字符串的相似程度，并返回相差字符个数
    function strSimilarity2Number(s, t){
        var n = s.length, m = t.length, d=[];
        var i, j, s_i, t_j, cost;
        if (n == 0) return m;
        if (m == 0) return n;
        for (i = 0; i <= n; i++) {
            d[i]=[];
            d[i][0] = i;
        }
        for(j = 0; j <= m; j++) {
            d[0][j] = j;
        }
        for (i = 1; i <= n; i++) {
            s_i = s.charAt (i - 1);
            for (j = 1; j <= m; j++) {
                t_j = t.charAt (j - 1);
                if (s_i == t_j) {
                    cost = 0;
                }else{
                    cost = 1;
                }
                d[i][j] = Minimum (d[i-1][j]+1, d[i][j-1]+1, d[i-1][j-1] + cost);
            }
        }
        return d[n][m];
    }
    //两个字符串的相似程度，并返回相似度百分比
    function strSimilarity2Percent(s, t){
        var l = s.length > t.length ? s.length : t.length;
        var d = strSimilarity2Number(s, t);
        return (1-d/l).toFixed(4);
    }
    function Minimum(a,b,c){
        return a<b?(a<c?a:c):(b<c?b:c);
    }


</script>
</html>